/* ==========================================================================
   ARRAY FIELDTYPE
   ========================================================================== */

.array-fieldtype {

}

.array-table-wrapper {
    @apply border dark:border-dark-900 rounded overflow-hidden;
    &:focus-within {
        @apply ring-2 ring-blue-300 dark:ring-dark-blue-100;
    }
}
.array-table {
    @apply rounded text-sm rtl:text-right ltr:text-left w-full;
    &:focus {
        @apply outline-none;
    }

    tr:not(:last-child) {
        th, td {
            @apply border-b dark:border-dark-900;
        }
    }

    th {
        @apply rtl:border-l ltr:border-r dark:border-dark-900 p-2 bg-gray-300 dark:bg-dark-500;
    }

    td {
        @apply p-0 m-0;
    }

    tr:first-child th {
        @apply rtl:rounded-tr ltr:rounded-tl;
    }

    tr:first-child td,
    tr:first-child .input-text-minimal {
        @apply rtl:rounded-tl ltr:rounded-tr;
    }

    tr:last-child th {
        @apply rtl:rounded-br ltr:rounded-bl;
    }
    tr:last-child td:last-child,
    tr:last-child .input-text-minimal {
        @apply rtl:rounded-bl ltr:rounded-br;
    }

    &:focus-within {
        @apply focus-none;
    }

    td:focus-within {
        @apply bg-gray-200 dark:bg-dark-600;
    }

    /* Read Only */
    .read-only-field & {
        th { @apply text-gray-500 dark:text-dark-150; }
        tr td { @apply bg-gray-200 dark:bg-dark-600; }
    }
}
